<style scoped>
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }

  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }

  .weui-panel {
    background: #eee;
  }

  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }

  .weui-panel {
    margin-top: 0;
    text-align: left;
  }

  .attachimg {
    /*width: 100%;*/
  }

  .tit label, .tit span {
    font-size: 16px;
  }

  .tit label {
    padding-right: 20px;
  }

  .weui-panel.weui-panel_access {
    padding-bottom: 10px;
  }

  .rj-cont-tit:not(.base) {
    border-radius: 5px;
  }

  .weui-cell {
    background: #fff;
  }

  .weui-cells__title {
    text-align: left;
    background: #eee;
  }

  .oitem {
    padding: 3px;
  }

  #acts span {
    font-size: 14px;
  }

  .weui-label {
    text-align: left;
  }

  .weui-media-box {
    text-align: left;
  }

  .weui-panel {
    background: #eee;
  }

  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }

  .weui-panel {
    margin-top: 0;
    text-align: left;
  }

  .hd .weui-grid.js_grid {
    font-weight: 600;
  }

  .weui-grid.js_grid {
    width: 25%;
    padding: 10px 1px;
  }

  /*.weui-grid.fir {*/
  /*  width: 20%;*/
  /*}*/
  /*.weui-grid.sec {*/
  /*  width: 15%;*/
  /*}*/
  /*.weui-grid.thr {*/
  /*  width: 20%;*/
  /*}*/
  /*.weui-grid.fou {*/
  /*  width: 15%;*/
  /*}*/
  /*.weui-grid.fiv {*/
  /*  width: 15%;*/
  /*}*/
  .weui-grid__label {
    text-overflow: initial;
  }

  .weui-panel__bd {
    width: auto !important;
    padding: 10px 15px;
    text-align: left;
  }
  .rj-cell {
    font-size: 0.9em;
    display: inline-block;
    margin-right: 15px;
  }
  .section {
    margin: 5px;
    border-radius: 5px;
  }
</style>
<template>
  <div class="comon" style="background: #eee;">
    <div
      style="height: 50px; line-height: 50px; background: #fff; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      库房调拨详情
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px"/>
      </a>
    </div>
    <!--    主表信息-->
    <div class="weui-form-preview" style="background: #fff;">
      <div class="weui-form-preview__hd">
        <label class="weui-form-preview__label">编号</label>
        <em class="weui-form-preview__value">{{baseInfo.code}}</em>
      </div>
      <div class="weui-form-preview__bd">
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">公司名</label>
          <span class="weui-form-preview__value">{{baseInfo.orgname}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">部门</label>
          <span class="weui-form-preview__value">{{baseInfo.departname}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">调出库房</label>
          <span class="weui-form-preview__value">{{baseInfo.fromsrname}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">调入库房</label>
          <span class="weui-form-preview__value">{{baseInfo.tosrname}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">入库公司</label>
          <span class="weui-form-preview__value">{{baseInfo.toorgname}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">调拨重量</label>
          <span class="weui-form-preview__value">{{attachUnit(baseInfo.shiftweight, '吨')}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">状态</label>
          <span class="weui-form-preview__value">{{baseInfo.statusname}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">备注</label>
          <span class="weui-form-preview__value">{{baseInfo.remark}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">操作人</label>
          <span class="weui-form-preview__value">{{baseInfo.applyname}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">创建时间</label>
          <span class="weui-form-preview__value">{{baseInfo.createtime}}</span>
        </div>
        <div class="weui-form-preview__item" v-if="baseInfo.files && baseInfo.files.length > 0">
          <label class="weui-form-preview__label">附件</label>
          <a v-for="(item, index) in baseInfo.files" :href="item.url">
            <span class="weui-form-preview__value">{{item.imagename}}</span>
          </a>
        </div>
      </div>
    </div>
    <!--    明细信息-->
    <div class="weui-panel__hd" style="text-align: left;">货品明细</div>
    <div class="weui-panel__bd section" v-for="product in baseInfo.items" style="background: #fff;">
      <div class="rj-cell max">
        <label>出库库间：</label>
        {{product.fromshname}}
        <span v-if="product.shiftweight != ''"> &nbsp;&nbsp;<label>数量：</label>{{product.shiftweight}} {{product.stockunit}}</span>
      </div>
      <div class="rj-cell max">
        <label>入库库间：</label>
        {{product.toshname}}
        <span v-if="product.unloadweight != ''">&nbsp;<label>数量：</label>{{product.unloadweight}} {{product.stockunit}}</span>
      </div>
      <div class="rj-cell max">
        <label>货品类型：</label><span>{{product.typename}}</span>
      </div>
      <div class="rj-cell max">
        <label>产&nbsp;&nbsp;&nbsp;品：</label><span>{{product.product}}</span> <span>{{product.spname}} </span>
      </div>
      <div class="rj-cell max" v-if="product.interSettlPrice">
        <label>内部价格：</label><span>{{product.interSettlPrice}} {{'元/' + product.stockunit}}</span>
      </div>
      <div class="rj-cell max">
        <label>备&nbsp;&nbsp;&nbsp;注：</label><span>{{product.remark}} </span >
      </div>
    </div>
    <!--    质检信息-->
    <div v-if="qaform.qacode != '' && qaform.qacode != null">
      <div class="weui-panel__hd" style="text-align: left;">质检信息</div>
      <div class="weui-panel__bd section" style="background: #fff;">
        <div  >
          <div class="rj-cell max">
            <label><span style="font-size: 14px;padding: 0;">质检单编号：</span></label>
            <span>{{qaform.qacode}}</span>

          </div>
        </div>
        <div class="rj-cell max">
          <label>抽检数量：</label>
          <span>{{qaform.chkpknum}} 包</span>
          <span> {{qaform.chkwght}} Kg</span>

          <label>合格重量：</label>
          <span> {{qaform.okweight}} Kg</span>
        </div>
        <div class="rj-cell max">
          <label>不合格重量：</label>
          <span> {{qaform.notokweight}} Kg</span>
          <label>不合格率：</label>
          <span> {{qaform.unqualifiedchkrate}}%</span>
        </div>
        <div class="rj-cell max">
          <label>土杂重量：</label>
          <span> {{qaform.soilchkweight}} Kg</span>
          <label>土杂率：</label>
          <span> {{qaform.soilchkrate}}%</span>
        </div>
        <br>
        <div class="rj-cell max">
          <label>合格率：</label>
          <span> {{Number((100-qaform.deductrate)).toFixed(2)}} %</span>
        </div>

        <div class="rj-cell max">
          <label>质检人：</label>
          <span>{{qaform.operatorname}}</span>
          <label>质检时间：</label>
          <span>{{qaform.createdate}}</span>
        </div>
        <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="qaFormImg != undefined && qaFormImg.length > 0">
          <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">质检单照片</p>
          <div class="exp uploaderFiles" style="display: inline-block;">
            <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in qaFormImg" :key="image.guid"  alt="" onerror="javascript:this.src='../../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
          </div>
        </div>
      </div>
    </div>
    <!--    出库单信息-->
    <div v-if="whoutform != null && whoutform != ''">
      <div class="weui-panel__hd" style="text-align: left;">出库单信息</div>
      <div class="weui-panel__bd section" style="background: #fff;">
        <div v-for="(outObj, index) in whoutform">
          <div class="rj-cell max">
            <label>出库单编号：</label>
            <span>{{outObj.whoutcode}}</span>
          </div>
          <div class="rj-cell max">
            <label>库房：</label>
            <span>{{outObj.storeroom}} </span>
            <!--              <label>重量：</label>-->
            <!--              <span> {{outObj.weight}} 吨</span>-->
          </div>
          <div class="rj-cell max">
            <label>操作人：</label>
            <span>{{outObj.operator}}</span>
            <label>出库时间：</label>
            <span>{{outObj.createtime}}</span>
          </div>
          <p style="color: #999;font-size: 12px;"> 出库单明细 </p>
          <div v-for="(product, index) in outObj.items" style="border-top: 1px solid #ccc;" >
            <div style="background: #eee;padding: 3px;">
              <div class="rj-cell max"  >
                <label> 库间：</label>
                <span>{{product.house}} </span>
              </div>
              <div class="rj-cell max"  >
                <label> 产品：</label>
                <span>{{product.product}} </span>
                <span>{{product.spename}} </span>
                <span>{{product.weight}} {{product.stockunit}}</span>
              </div>
            </div>
          </div>
          <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="outObj.imgs != undefined && outObj.imgs.length > 0">
            <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">出库单单据</p>
            <div class="exp uploaderFiles" style="display: inline-block;">
              <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in outObj.imgs " :key="image.guid"  alt="" onerror="javascript:this.src='../../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    入库单信息-->
    <div v-if="whinform != null && whinform != ''">
      <div class="weui-panel__hd" style="text-align: left;">入库单信息</div>
      <div class="weui-panel__bd section" style="background: #fff;">
        <div v-for="(outObj, index) in whinform">
          <!--          <div style="border-top: 0px solid #eee;">-->
          <div class="rj-cell max">
            <label>入库单编号：</label>
            <span>{{outObj.formno}}</span>
          </div>
          <div class="rj-cell max">
            <label>库房：</label>
            <span>{{outObj.strname}} </span>
          </div>

          <div class="rj-cell max">
            <label>操作人：</label>
            <span>{{outObj.operator}}</span>

            <label>出库时间：</label>
            <span>{{outObj.createdate}}</span>
          </div>
          <p style="color: #999;font-size: 12px;"> 入库单明细 </p>
          <div v-for="(product, index) in outObj.items" style="border-top: 1px solid #ccc;" >
            <div style="background: #eee;padding: 3px;">
              <div class="rj-cell max"  >
                <label> 库间：</label>
                <span>{{product.house}} </span>
              </div>
              <div class="rj-cell max"  >
                <label> 产品：</label>
                <span>{{product.product}} </span>
                <span>{{product.spename}} </span>
                <span>{{product.weight}} {{product.stockunit}}</span>
              </div>
            </div>
          </div>
          <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="outObj.images != undefined && outObj.images.length > 0">
            <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">入库单单据</p>
            <div class="exp uploaderFiles" style="display: inline-block;">
              <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in outObj.images " :key="image.guid"  alt="" onerror="javascript:this.src='../../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
            </div>
          </div>
          <!--          </div>-->
        </div>
      </div>
    </div>
    <!--    审批记录-->
    <SalesOperationLogs7 :orderid="id" :srguid="baseInfo.srguid" :departid="baseInfo.departid" :flowid="flowid"></SalesOperationLogs7>
    <!--    </div>-->
    <!--  </div>-->
    <CommentBom v-if="isReady" :flowid="flowid" :nodeid="nodeid" :id="id" :srguid="baseInfo.srguid" :departid="baseInfo.departid" :model="baseInfo" navgateUrl="/transferapply2/TransApplyList" ></CommentBom>
  </div>
</template>

<script>
  import SalesOperationLogs7 from '../common/SalesOperationLogs7'
  import CommentBom from '@/components/common/CommentBom'

  export default {
    name: 'ViewTransApply2',
    data() {
      return {
        flowid: 28,
        openid: localStorage.openid,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
        userid: localStorage.userId,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
        id: '',
        baseInfo: {},
        baseItems: [],
        qaform:{},
        qaFormImg:[],
        titleName:"",
        whoutform:[],
        whinform:[],
        orderfiles: [],
        isReady: false
      }
    },
    components: {
      SalesOperationLogs7,
      CommentBom
    },
    created() {
      window.addEventListener('setItem', () => {
        this.openid = localStorage.getItem('openid');
        this.userid = localStorage.getItem('userId');
      })
    },
    mounted() {
      this.id = this.$route.query.id;
      this.getbaseInfo(this.id);
  //图片浏览器
      $('.weui-panel').on('click', '.uploaderFiles .attachimg', function () {
        var num = $(this).parent().children().not(".exp").length;
        var imgArr = [];
        for (var i = 0; i < num; i++) {
          imgArr.push($(this).parent().find('.attachimg').eq(i).data('img'));
        }
        var pnum = $(this).parent().find('.exp').length;
        var index = pnum > 0 ? $(this).index() - pnum : $(this).index();
        var pb = $.photoBrowser({
          items: imgArr,
          initIndex: index
        });
        pb.open();
      });

    },
    methods: {
      packUnit: function(unit, currency) {
        return unit != undefined && unit != '' ? currency == 2 ? '美元/' + unit : '元/' + unit : '';
      },
      getbaseInfo: function (id) {
        this.axios({
          method: 'get',
          url: `/prod-api/bill/transferapply/${id}`,
        }).then(response => {
          if (response.data.code == 200) {
            let data = response.data;
            this.baseInfo = data.apply || {};
            this.whoutform = data.whoutform || {};
            this.whinform = data.whinform || {};
            this.qaform = data.qaform || {};
            // this.baseItems = response.data.items;
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastError('系统错误');
          }
          this.isReady = true;
        });
      },
    }
  }
</script>
